<script setup>
import rftitle from './rftitle.vue'
import { computed } from 'vue'
import { left5Data } from '../pages/home/index'


const genset1 = computed(() => {
  let one = left5Data.value.fdj[0]
  return {
    name: `${one.name}状态`,
    status: one.statue,  // 0未启动 1启动
    fuelOil: '燃油位百分比',
    percent: one.ryw,
    data: [
      { name: '发电机模式：', value: one.fdjms, w: 'min-w-[72px]' },
      { name: '机油压力：', value: one.jyyl, w: 'min-w-[84px]' },
      { name: '总有功功率：', value: one.zyggl, w: 'min-w-[72px]' },
      { name: '燃油压力：', value: one.ryyl, w: 'min-w-[84px]' },
      { name: '总无功功率：', value: one.zwggl, w: 'min-w-[72px]' },
      { name: '燃油温度：', value: one.rywd, w: 'min-w-[84px]' },
      { name: '转速：', value: one.zs, w: 'min-w-[72px]' },
      { name: '累计燃油消耗：', value: one.ryljxh, w: 'min-w-[84px]' },
      { name: '发电机温度：', value: one.fdjwd, w: 'min-w-[72px]' },
      { name: '累计电能：', value: one.ljdn, w: 'min-w-[84px]' },
    ]
  }
})

const genset2 = computed(() => {
  let one = left5Data.value.fdj[1]
  return {
    name: `${one.name}状态`,
    status: one.statue,  // 0未启动 1启动
    fuelOil: '燃油位百分比',
    percent: one.ryw,
    data: [
      { name: '发电机模式：', value: one.fdjms, w: 'min-w-[72px]' },
      { name: '机油压力：', value: one.jyyl, w: 'min-w-[84px]' },
      { name: '总有功功率：', value: one.zyggl, w: 'min-w-[72px]' },
      { name: '燃油压力：', value: one.ryyl, w: 'min-w-[84px]' },
      { name: '总无功功率：', value: one.zwggl, w: 'min-w-[72px]' },
      { name: '燃油温度：', value: one.rywd, w: 'min-w-[84px]' },
      { name: '转速：', value: one.zs, w: 'min-w-[72px]' },
      { name: '累计燃油消耗：', value: one.ryljxh, w: 'min-w-[84px]' },
      { name: '发电机温度：', value: one.fdjwd, w: 'min-w-[72px]' },
      { name: '累计电能：', value: one.ljdn, w: 'min-w-[84px]' },
    ]
  }
})


</script>

<template>
  <!-- 三防状态 -->
  <div class="h-[58px]"></div>
  <div class="w-[320px] h-[36px] mx-auto relative">
    <img class="w-full h-full" src="../assets/one/one_left_2.png" alt="">
    <img class="w-[80px] h-[36px] left-[40px] bottom-[12px] absolute" src="../assets/one/one_left_3.png" alt="">
    <img class="w-[48px] h-[48px] left-[56px] bottom-[26px] absolute " src="../assets/four/five1.png" alt="">
    <span class="absolute left-[152px] bottom-[16px] text-white text-[16px]">供配电健康状态</span>
    <span :class="left5Data.gpdjkzt == '异常' ? 'status_color_red' : 'main_color'"
      class="absolute left-[152px] bottom-[42px] text-white text-[24px] main_color font-semibold">{{
      left5Data.gpdjkzt
    }}</span>
  </div>

  <rftitle class="mt-[48px] mb-[24px]" title="供配电"></rftitle>
  <div class="flex items-center mb-[48px] justify-center">
    <div class="w-[80px] h-[80px] liubian flex justify-center items-center">
      <img class="w-[24px] h-[24px] " src="../assets/four/five2.png" alt="">
    </div>
    <div class="text-[16px] text-white  pl-[24px] ">
      <div>供配电方式</div>
      <div class="text-[24px] font-semibold  mt-[8px] status_color_blue">{{
        left5Data.gpdfs
      }}</div>
    </div>
  </div>


  <rftitle class="mb-[24px]" title="柴油发电机系统"></rftitle>

  <div class="mt-[40px]">

    <div class="flex items-end h-[57px]">

      <div class="w-[88px] h-[28px] relative">
        <img class="w-[88px] h-[28px]" src="../assets/four/3222.png" alt="">
        <img class="w-[40px] h-[40px] absolute left-[24px] mt-[-29px]" src="../assets/five/3-255-1.png" alt="">
      </div>
      <div class="ml-[20px] mr-[56px]">
        <div class="text-[16px] text-white ">{{ genset1.name }}</div>
        <div :class="genset1.status == 1 ? 'main_color' : 'status_color'"
          class="status_color_blue font-semibold text-[24px] mb-[5px] mt-[8px]">{{
      genset1.status }}</div>
      </div>
      <div>
        <div class="text-[16px] text-white ">{{ genset1.fuelOil }}</div>
        <div class="status_color_blue font-semibold text-[24px] mb-[5px] mt-[8px]">{{ genset1.percent }}</div>
      </div>

    </div>

    <div class="flex flex-wrap mt-[21px]">

      <div class="w-[50%] text-[14px] flex mb-[12px]" style="color: #B2E5FF;" v-for="(i, n) in genset1.data" :key="n">
        <div :class="i.w">{{ i.name }}</div>
        <div class="text-[14px] text-white ml-[12px]">
          {{ i.value }}
        </div>
      </div>




    </div>



  </div>

  <div class="mt-[10px] mb-[40px]">
    <img class="w-[368px] h-[2px]" src="../assets/five/3-25-2.png" alt="">
  </div>

  <div class="">

    <div class="flex items-end h-[57px]">

      <div class="w-[88px] h-[28px] relative">
        <img class="w-[88px] h-[28px]" src="../assets/four/3222.png" alt="">
        <img class="w-[40px] h-[40px] absolute left-[24px] mt-[-29px]" src="../assets/five/3-255-1.png" alt="">
      </div>
      <div class="ml-[20px] mr-[56px]">
        <div class="text-[16px] text-white ">{{ genset2.name }}</div>
        <div :class="genset2.status == 1 ? 'main_color' : 'status_color'"
          class="status_color_blue font-semibold text-[24px] mb-[5px] mt-[8px]">{{
      genset2.status }}</div>
      </div>
      <div>
        <div class="text-[16px] text-white ">{{ genset2.fuelOil }}</div>
        <div class="status_color_blue font-semibold text-[24px] mb-[5px] mt-[8px]">{{ genset2.percent }}</div>
      </div>

    </div>

    <div class="flex flex-wrap mt-[21px]">

      <div class="w-[50%] text-[14px] flex mb-[12px]" style="color: #B2E5FF;" v-for="(i, n) in genset2.data" :key="n">
        <div :class="i.w">{{ i.name }}</div>
        <div class="text-[14px] text-white ml-[12px]">
          {{ i.value }}
        </div>
      </div>




    </div>



  </div>

</template>

<style scoped></style>
